<template>
  <v-container header="设备详情" body-class="pa-2" scroll>
    <info-table :info="info" class="white"></info-table>
    <runTimeChart class="white mt-3" :devideBoxNo="detail.boxNo"></runTimeChart>
    <mapBaseLocation class="white mt-3" :imei="detail.imei"></mapBaseLocation>
    <mapRunPath class="white mt-3" :devideImei="detail.imei"></mapRunPath>
  </v-container>
</template>
<script>
import {
  getStorage,
  rmStorage
} from '@/utils/auth'
import infoTable from './components/infoTable'
import runTimeChart from './components/runTimeChart'
import mapBaseLocation from './components/mapBaseLocation'
import mapRunPath from './components/mapRunPath'
export default {
  components: {
    infoTable,
    runTimeChart,
    mapBaseLocation,
    mapRunPath
  },
  beforeRouteLeave(to, from, next) {
    rmStorage('devideDetail')
    next()
  },
  data() {
    return {
      detail: {}
    }
  },
  created() {
    this.detail = JSON.parse(getStorage('devideDetail'))
    this.info = {
      head: '基本信息',
      list: [
        {label: '设备名称', value: this.detail.name},
        {label: '设备型号', value: this.detail.spec},
        {label: '采集终端号', value: this.detail.boxNo},
        {label: '定位器号', value: this.detail.imei}
      ]
    }
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.head {
  padding: 14px 20px;
  color: #262626;
  font-size: 16px;
  border-bottom: 1px solid #E9E9E9;
}
</style>